<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国家城市联动</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        body {
            text-align: center;
            padding-top: 30px;
        }
    </style>
</head>

<body>
    <select class="guojia">
        <option value="请选者国家">请选择国家</option>
    </select>
    <select class="city">
        <option value="请选者国家">请选择城市</option>
    </select>
    <select class="xian">
        <option value="请选者国家">请选择乡镇</option>
    </select>
    <script>
        let guojia = document.getElementsByClassName("guojia")[0]; //国家
        let city = document.getElementsByClassName("city")[0]; //省份
        let xian = document.getElementsByClassName("xian")[0]; //市
        let Guo = ["中🧡国", "②❣国", "③❤国"];
        let City = [
            ["中🧡国A市", "中🧡国B市"],
            ["②❣国A市", "②❣国B市"],
            ["③❤国A市", "③❤国B市"]
        ];
        let Xian = [
                [
                    ["中🧡国A市A县", "中🧡国A市B县"],
                    ["中🧡国B市A县", "中🧡国B市B县"]
                ],
                [
                    ["②❣国A市A县", "②❣国A市B县"],
                    ["②❣国B市A县", "②❣国B市B县"]
                ],
                [
                    ["③❤国A市A县", "③❤国市B县"],
                    ["③❤国B市A县", "③❤国B市B县"]
                ]
            ]
            // 循环把国家添加进国家下拉列表里
        console.log(City[1].length);
        for (let i = 0; i < Guo.length; i++) { //循环第一个国家数组
            // 创建option标签
            let option = document.createElement("option");
            // 把国家放进option标签里面
            option.value = i;
            option.innerText = Guo[i];
            // 把option标签放进国家下拉框里面  类名为guojia的select
            guojia.appendChild(option);
        }



        //监听国家下拉选项然后给省份添加相应的下拉选项
        guojia.onchange = function() {
            //console.log(guojia.value);
            city.innerHTML = "";
            xian.innerHTML = "";
            for (let i = 0; i < guojia.length; i++) {
                if (guojia.value == i) {
                    for (let j = 0; j < City[i].length; j++) {
                        let option = document.createElement("option");
                        option.innerText = City[i][j];
                        //console.log(j);
                        option.value = j;
                        city.appendChild(option);
                        1

                    }
                    for (let k = 0; k < Xian[i][0].length; k++) {
                        let option = document.createElement("option");
                        option.innerText = Xian[i][0][k];
                        option.value = k;
                        xian.appendChild(option);
                    }

                }

            }
        }



        //监听城市下拉框然后给城市添加相应的下拉选项
        city.onchange = function() {
            //console.log(city.innerText);
            xian.innerHTML = "";
            for (let i = 0; i < guojia.length; i++) {
                if (guojia.value == i) {
                    for (let j = 0; j < City[i].length; j++) {
                        if (city.value == j) {
                            for (let x = 0; x < Xian[i][j].length; x++) {
                                console.log(Xian[i][j]);
                                let option = document.createElement("option");
                                option.innerText = Xian[i][j][x];
                                option.value = x;
                                xian.appendChild(option);
                            }
                        }
                    }
                }
            }
        }
    </script>
</body>

</html>